<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <title>时尚倒计时</title>

    <!-- 业务css -->
    <link href="${ctx}/resource/css/fashionCountdown.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/resource/css/csshake.min.css" rel='stylesheet prefetch'  >
    
    <link href="${ctx}/resource/css/classicsCountdown.css" rel="stylesheet" type="text/css"/>
    <!-- 本页面所需css -->
    <style type="text/css">
    	.table th, .table td{
    		vertical-align: middle;
    	}
    	#js_hour,#js_min,#js_second{
    		 display: inline;
    		 width: 50px;
    		 vertical-align: middle;
    	} 
    	.zzsc{
    		text-align: center;
    	}
    	.div-controls{
    		text-align: center;
    		margin-top:40px;
    	}
    </style> 
</head>

<body>
	<!-- 菜单及导航数据  -->
    <data id="info" nav="timer" menu="addCountDown" service="倒计时服务" action="炫酷倒计时">
  	<div class="row wrapper border-bottom white-bg page-heading animated rotateIn min-height" >
         <div class="col-lg-12 page-heading">
		    <div id="tab-1" class="tab-pane active">
				<div class="portlet-body">
					<div class="tabbable portlet-tabs">
						<div class="tab-content">
							<div class="tab-pane active" id="portlet_tab1">
							    <div id="pbar" class="progressbar" data-perc="100">
									<div id="show0" class="bar" style="display: none;"><span></span></div>
									<div id="show1" class="bar color2" style="display: none;"><span></span></div>
									<div id="show2" class="bar color3" style="display: none;"><span></span></div>
									<div id="show3" class="bar color4" style="display: none;"><span></span></div>
								</div>
								<div id="zzsc" class="zzsc" ></div> 
								<div class="controls div-controls"  >
									<input id="js_hour" size="2" value="00" type="text" class="m-wrap small form-control" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')"/>
									<span class="help-inline">时</span>
									<input id="js_min" size="2" value="00" type="text" class="m-wrap small form-control" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')"/>
									<span class="help-inline">分</span>
									<input id="js_second" value="00" size="2" type="text" class="m-wrap small form-control" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')"/>
									<span class="help-inline">秒</span>
									<button id="js_start" class="btn btn-success">开始</button>
									<button id="js_reset" class="btn btn-warning">重置</button>
									<a id="" class="btn btn-primary" href="${ctx}/center/timer/countdown/classics.html">简约倒计时</a> 
								</div>   
							</div>
						</div>
					</div>
				</div>
		 	</div> 
		</div>
	</div>

	<js>
	<script src="${ctx}/resource/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="${ctx}/resource/js/fashionCountdown.js"></script>
	<script src="${ctx}/resource/js/app.js"></script>
	<script type="text/javascript">
		$("#js_reset").click(function(){
			$("input").val("00");
			location.reload();
		});
		$(document).ready(function(){
			var number =Math.round(Math.random()* 3);
			if(number == 0){
				$("#show0").show();
			}
			if(number == 1){
				$("#show1").show();
			}
			if(number == 2){
				$("#show2").show();
			}
			if(number == 3){
				$("#show3").show();
			}
		});
	</script>
	</js>
</body>
</html>